<template>
  <div id="main" >
    <ExhibitionBox v-model="currentIndex" @on-change="pageChange">
      <ExhibitionItem>
        <Exhibition1></Exhibition1>
      </ExhibitionItem>
      <ExhibitionItem>
        <Exhibition2></Exhibition2>
      </ExhibitionItem>
      <ExhibitionItem>
        <Exhibition3></Exhibition3>
      </ExhibitionItem>
      <ExhibitionItem>
        <Exhibition4></Exhibition4>
      </ExhibitionItem>
    </ExhibitionBox>
  </div>
</template>

<script>
  import ExhibitionBox from './ExhibitionBox';
  import ExhibitionItem from './ExhibitionItem';
  import Exhibition1 from './Exhibition1';
  import Exhibition2 from './Exhibition2';
  import Exhibition3 from './Exhibition3';
  import Exhibition4 from './Exhibition4';
  export default {
    name: 'home',
    components:{
      ExhibitionBox,
      ExhibitionItem,
      Exhibition1,
      Exhibition2,
      Exhibition3,
      Exhibition4,
    },
    data() {
      return {
        currentIndex:0,
      }

    },
    methods: {
      pageChange(index){
        console.log(index);
      }
    }
  }
</script>

<style lang="less">
  @offset-x:0;
  @offset-y: 200px;
  #main {
    position: relative;
    width: 100vw;
    height: 100vh;
    #exhibitBox {
      position: absolute;
      width: 100vw;
      height: 100vh;
      .exhibit-mask {
        position: absolute;
        bottom: @offset-y;
        right: @offset-x;
        width: 100vw;
        height: 100vw;
        transform-origin: 100% 100%;
        overflow: hidden;
        transition: all .9s;
        .exhibit-content-box {
          position: absolute;
          bottom: 0;
          right: 0;
          width: 100vw;
          height: 100vh;
          padding: @offset-y 0 0 @offset-x;
          transform-origin: 100% 100%;
          transition: all .9s;
          .exhibit-content{
            width:100vw;
            height:100vh;
            transition: all .9s;
          }
        }
      }
    }
  }
</style>
